<template>
  <div class="content">
    <div ref="chartsRef" style="width: 1200px; height: 1000px;margin:0 auto"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import china from '@/assets/js/china.json'
import { ref, onMounted } from 'vue';
import { planePath, points, linesData } from './js/mapEchart.data'

const chartsRef = ref(null);

onMounted(() => {
  initCharts();
})

function initCharts() {
  const charts = echarts.init(chartsRef.value);
  const option = {
    backgroundColor: '#0E2152',// 背景颜色
    tooltip: { // 鼠标移到图里面的浮动提示框
      trigger: 'item', // 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
      formatter: (params) => {
        return params.name
      }
    },
    geo: {// 地图配置
      map: 'china',
      label: { // 图形上的文本标签
        formatter: 123123,
        normal: {// 通常状态下的样式
          show: true,
          textStyle: {
            color: '#fff'
          }
        },
        emphasis: {// 鼠标放上去高亮的样式
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {// 地图区域的样式设置
        normal: { // 通常状态下的样式
          borderColor: '#5089EC',
          borderWidth: 1,
          areaColor: { //地图区域的颜色
            type: 'radial', // 径向渐变
            x: 0.5, // 圆心
            y: 0.5,// 圆心
            r: 0.8,// 半径
            colorStops: [
              { // 0% 处的颜色
                offset: 0,
                color: 'rgba(0, 102, 154, 0)'
              },
              { // 100% 处的颜色
                offset: 1,
                color: 'rgba(0, 102, 154, .4)'
              }
            ]
          }
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: '#2386AD',
          borderWidth: 0
        }
      },
      // nameProperty: 'name', // 关联GeoJson中的地理要素数据properties: {name: '北京'}
      // data: [{ name: '广东', value: 100 }]
    },
    series: [
      { // 线条系列数据
        type: 'lines',
        zlevel: 1,// 所有图形的 zlevel 值。
        symbol: ['none', 'arrow'], // 标记的图形: 箭头
        symbolSize: 10, // 标记的大小
        effect: { // 线条特效的配置
          show: true,
          period: 10, // 特效动画的时间，单位s
          trailLength: 0.1, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
          symbol: 'circle', // 特效图形的标记 可选'circle'等 planePath
          symbolSize: 6,// 特效标记的大小
          color: '#48f3e6',
        },
        lineStyle: { // 线条样式
          normal: {
            color: '#93EBF840',
            width: 1, // 线条宽度
            opacity: 0.4, // 尾迹线条透明度
            curveness: 0.2// 尾迹线条曲直度
          }
        },
        data: linesData
      },
      { // 散点系列数据
        type: 'effectScatter',// 带有涟漪特效动画的散点（气泡）图
        coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
        // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
        effectType: 'ripple',
        // 配置何时显示特效。可选'render'和'emphasis' 。
        showEffectOn: 'render',
        rippleEffect: { // 涟漪特效相关配置。
          period: 10, // 动画的周期，秒数。
          scale: 4,// 动画中波纹的最大缩放比例。
          // 波纹的绘制方式，可选 'stroke' 和 'fill'。
          brushType: 'fill'
        },
        zlevel: 2, // 所有图形的 zlevel 值。
        data: points
      }
    ]
  }
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap('china', china)
  charts.setOption(option)
}
</script>
<style scoped>
.content {
  background-color: #0e2152;
  height: 100%;
}
</style>
